<template>
	<view>
		<view>
			<table-title content="报修单"></table-title>
			<view>
				<small-title content="基本资料"></small-title>
				<view class="item-table">
					<view-item name="申请人" :value="userMsg.userName"></view-item>
					<view-item name="手机号码" :value="userMsg.userPhone"></view-item>
					<view-item name="租户名称" :value="userMsg.userCompany"></view-item>
					<view-item name="楼栋" :value="userMsg.userBuilding"></view-item>
					<view-item name="单元号" :isLast="true" :value="userMsg.room"></view-item>
				</view>
			</view>
			<view>
				<small-title content="预约维修时间"></small-title>
				<view class="picker-part">
					<picker mode="date" @change="setDate">
						<view>{{date}}</view>
					</picker>
					<picker :range="times" @change="timesChange" mode="multiSelector" style="margin-left: 100rpx;">
					    {{ times[0][hourIndex] }}:{{ times[1][minuteIndex] }}
					</picker>
				</view>
			</view>
			<view>
				<small-title content="类型"></small-title>
				<radio-group class="radiogroup-style">
					<view class="first-radio">
						<radio :checked="normalChecked" color="#FF0000"></radio>
						<view @click="chooseNormal">普通类型</view>
					</view>
					<view class="second-radio">
						<radio :checked="emergencyChecked" color="#FF0000"></radio>
						<view @click="chooseEmergency">紧急类型</view>
					</view>
				</radio-group>
			</view>
			<view>
				<small-title content="区域"></small-title>
				<radio-group class="radiogroup-style">
					<view class="first-radio">
						<radio :checked="workChecked" color="#FF0000"></radio>
						<view @click="chooseWork">办公区域</view>
					</view>
					<view class="second-radio">
						<radio :checked="publicChecked" color="#FF0000"></radio>
						<view @click="choosePublic">公共区域</view>
					</view>
				</radio-group>
			</view>
			<view>
				<small-title content="问题描述"></small-title>
				<textarea class="textarea-style" maxlength="-1"></textarea>
			</view>
			<view>
				<small-title content="上传图片"></small-title>
				<view style="display: flex;margin-top: 10rpx;">
				    <view class="picture-block">
				        <image v-if="hasAdd[0]" src="@/static/delete-logo.svg" class="wrong-logo"
							@click="deletePicture(0)"></image>
				        <image v-if="!hasAdd[0]" src="@/static/add-logo.svg" class="picture-style" @click="addPicture(0)"></image>
						<image v-if="hasAdd[0]" :src="imageUrl[0]" class="picture-style" @click="previewPicture(0)"></image>
						<yq-avatar @upload="uploadPicture" ref="avatar"></yq-avatar>
				    </view>
				    <view class="picture-block">
				        <image v-if="hasAdd[1]" src="@/static/delete-logo.svg" class="wrong-logo"
				    		@click="deletePicture(1)"></image>
				        <image v-if="!hasAdd[1]" src="@/static/add-logo.svg" class="picture-style" @click="addPicture(1)"></image>
				    	<image v-if="hasAdd[1]" :src="imageUrl[1]" class="picture-style" @click="previewPicture(1)"></image>
				    	<yq-avatar @upload="uploadPicture" ref="avatar"></yq-avatar>
				    </view>
				    <view class="picture-block">
				        <image v-if="hasAdd[2]" src="@/static/delete-logo.svg" class="wrong-logo"
				    		@click="deletePicture(2)"></image>
				        <image v-if="!hasAdd[2]" src="@/static/add-logo.svg" class="picture-style" @click="addPicture(2)"></image>
				    	<image v-if="hasAdd[2]" :src="imageUrl[2]" class="picture-style" @click="previewPicture(2)"></image>
				    	<yq-avatar @upload="uploadPicture" ref="avatar"></yq-avatar>
				    </view>
				</view>
			</view>
			<button class="confirm-button" @click="toRepairHistory">确认</button>
			<view style="height: 200rpx;"></view>
		</view>
		<u-tabbar v-model="current" :list="list" :before-switch="clickTabbar"></u-tabbar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				time: '',
				date: '',
				normalChecked: false,
				emergencyChecked: false,
				publicChecked: false,
				workChecked: false,
				userMsg:{
					'userName':'李阳','userPhone':'13565137716','room':'1501',
					'userCompany':'福建海峡科技有限公司','userBuilding':'福建八闽大厦',
				},
				times:[
				    ['01','02','03','04','05','06','07','08','09','10','11','12',
				    	'13','14','15','16','17','18','19','20','21','22','23','24'],
				    ['00','30']
				],
				hourIndex: 0,
				minuteIndex: 0,
				hasAdd: [false,false,false],
				imageUrl: ['../../../static/add-logo.svg','../../../static/add-logo.svg',
					'../../../static/add-logo.svg'],
				list: [
					{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '楼层管家',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发现',
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '消息',
						count: 23,
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
					},
				],
				current: 0
			}
		},
		methods: {
			toRepairHistory() {
				uni.navigateTo({
					url:'../history/history'
				})
			},
			timesChange(e) {
			    //获得对象的 detail的 value
			    this.hourIndex = e.detail.value[0];
			    this.minuteIndex = e.detail.value[1];
			},
			setDate(e) {
				this.date = e.detail.value
			},
			setTime(e){
				this.time = e.detail.value
			},
			chooseEmergency(){
				this.normalChecked = false
				this.emergencyChecked = true
			},
			chooseNormal(){
				this.emergencyChecked = false
				this.normalChecked = true
			},
			choosePublic(){
				this.workChecked = false
				this.publicChecked = true
			},
			chooseWork(){
				this.workChecked = true
				this.publicChecked = false
			},
			uploadPicture(rsp) {
			    this.$set(this.imageUrl, rsp.index, rsp.path);
			},
			addPicture(index) {
				let hasAddTmp = [...this.hasAdd]
				hasAddTmp[index] = true
				this.hasAdd = hasAddTmp
			    this.$refs.avatar.fChooseImg(index,{
			        selWidth: "640upx", selHeight: "400upx",
			        expWidth: '640upx', expHeight: '400upx'
			    });
			},
			deletePicture(e){
				let hasAddTmp = [...this.hasAdd]
			    let imgTmp = [...this.imageUrl]
			    imgTmp[e] = ''
				hasAddTmp[e] = !hasAddTmp[e]
				this.hasAdd = hasAddTmp
			    this.imageUrl = imgTmp
			},
			previewPicture(e){
				console.log(this.imageUrl.slice(e,e+1))
				uni.previewImage({
					urls:this.imageUrl.slice(e,e+1),
					longPressActions:{
						itemList:['发送给朋友','保存图片','收藏']
					}
				})
			},
			clickTabbar(index) {
				switch(index){
					case 0:
						console.log('首页')
						uni.redirectTo({
							url:'/pages/home/home'
						})
						return true
						break
					case 1:
						console.log('楼层管家')
						return true
						break
					case 2:
						console.log('发现')
						return true
						break
					case 3:
						console.log('消息')
						uni.redirectTo({
							url:'/pages/systemAnnoucement/list/list'
						})
						return true
						break
					case 4:
						console.log('我的')
						uni.navigateTo({
							url:'/pages/myPage/myPage'
						})
						return true
						break
				}
			}
		},
		mounted() {
			let year = new Date().getFullYear()
			let month = new Date().getMonth()
			let date = new Date().getDate()
			let hour = new Date().getHours()
			let minute = new Date().getMinutes()
			month = month > 9 ? month : '0' + month
			date = date > 9 ? date : '0' + date
			hour = hour > 9 ? hour : '0' + hour
			minute = minute > 9 ? minute : '0' + minute
			let nowDate = year + '-' + month + '-' + date
			let nowTime = hour + ':' + minute
			this.time = nowTime
			this.date = nowDate
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.confirm-button{
		background-color: #007AFF;
		color: #FFFFFF;
		width: 650rpx;
		margin-top: 50rpx;
		border-radius: 50rpx;
	}
	.picker-part{
		display: flex;
		width: 650rpx;
		align-items: center;
		height: 100rpx;
		background-color: #FFFFFF;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.radiogroup-style{
		width: 650rpx;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		margin-left: 50rpx;
		justify-content: center;
		border: solid 1rpx #C0C0C0;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 300rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.first-radio{
		display: flex;
		height: 100rpx;
		width: 300rpx;
		align-items: center;
	}
	.second-radio{
		display: flex;
		height: 100rpx;
		align-items: center;
		margin-left: 50rpx;
	}
	.picture-part{
		display: flex;
		margin: 0 0 50rpx 0;
		font-size: 100rpx;
		font-weight: 200;
		align-items: center;
		justify-content: center;	
		width: 170rpx;
		height: 170rpx;
		border: dashed 1rpx #000000;
	}
	.picture-style{
		width: 170rpx;
		height: 170rpx;
		margin: 0 0 10rpx 0rpx;
	}
	.picture-block{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 60rpx;
	}
	.wrong-logo{
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -40rpx;
		margin-left: 130rpx;
		z-index: 980;
		background-color: #555555
	}
</style>
